<template>
  <div class="home-content">
    <vs-card type="5">
      <template #title>
        <h3>Pot with a plant</h3>
      </template>
      <template #img>
        <img src="../assets/logo.png" alt="">
      </template>
      <template #text>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        </p>
      </template>
      <template #interactions>
        <vs-button danger icon>
          <span class="material-icons">
          favorite
          </span>
        </vs-button>
        <vs-button class="btn-chat" shadow primary>
          <span class="material-icons">
          horizontal_split
          </span>
          <span class="span">
          23
        </span>
        </vs-button>
      </template>
    </vs-card>

    <div>
      <vs-button
          icon
          color="success"
          flat
          :active="active == 1"
          @click = 'getTokne'
      >
        <span class="material-icons">
        downloading
        </span>
      </vs-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  props: {
    msg: String
  },
  data(){
    return{
      active:0,
    }
  },
  methods:{
    // 测试 token
    async getTokne(){
      var result = await this.$proxy.testToken()
      console.log(result)
      if(result.code === 0){
        this.$vs.notification({
          title: '抱歉,登录有误',
          position:'top-center',
          color:'rgb(59,222,200)',
          text: result.msg
        })
      }
    }
  }

  // 生命周期
  // beforeCreate() {
  //   const loading = this.$vs.loading({
  //     type:'points',
  //     text:'数据在来的路上'
  //   })
  //   setTimeout(() => {
  //     loading.close()
  //   }, 3000)
  // }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home-content{
  margin-left:5%;
  margin-top: 1.5%;
}
</style>
